<template>
    <div id="teamCardList">
        <van-card
                v-for="team in props.teamList"
                :thumb="team.avatarUrl"
                :desc="team.description"
                :title="`${team.name}`"
        >
            <template #tags>
                <van-tag plain type="danger" style="margin-right: 8px; margin-top: 8px">
                    {{
                    teamStatusEnum[team.status]
                    }}
                </van-tag>
            </template>

            <template #bottom>
                <div>
                    {{ `队伍人数: ${team.hasJoinNum}/${team.maxNum}` }}
                </div>

                <div>
                    {{ '创建时间: ' + team.createTime }}
                </div>

                <div v-if="team.expireTime">
                    {{ '过期时间: ' + team.expireTime }}
                </div>
            </template>
            <template #footer>
                <van-button size="small" type="primary" v-if="team.userId !== currentUser?.id && !team.hasJoin" plain
                            @click="preJoinTeam(team)">
                    加入队伍
                </van-button>
                <van-button v-if="team.userId === currentUser?.id" size="small" plain
                            @click="doUpdateTeam(team.id)">更新队伍
                </van-button>
                <!-- 仅加入队伍可见 -->
                <van-button v-if="team.userId !== currentUser?.id && team.hasJoin" size="small"
                            @click="doQuitTeam(team.id)">退出队伍
                </van-button>
                <van-button v-if="team.userId === currentUser?.id" size="small" type="danger"
                            @click="doDeleteTeam(team.id)">解散队伍
                </van-button>
            </template>
        </van-card>
        <van-dialog
                v-model:show="showPasswordDialog"
                title="请输入密码"
                show-cancel-button
                @confirm="doJoinTeam"
                @cancel="doJoinCancel">
            <van-field v-model="password" placeholder="请输入密码"/>
        </van-dialog>
    </div>
</template>

<script setup lang="ts">

import {TeamType} from "../models/team";
import team_avatar from "../assets/team_avatar.jpg"
import {teamStatusEnum} from "../constants/team.ts";
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {getCurrentUser} from "../services/user.ts";
import myAxios from "../plugins/myAxios.ts";
import {showConfirmDialog, showFailToast, showSuccessToast} from "vant";

interface TeamCardListProps {
    teamList: TeamType[];
}

const props = withDefaults(defineProps<TeamCardListProps>(), {
    // @ts-ignore
    teamList: [] as TeamType[],
});

const showPasswordDialog = ref(false);
const password = ref('');
const joinTeamId = ref(0);
const currentUser = ref();
const router = useRouter();

onMounted(async () => {
    currentUser.value = await getCurrentUser();
})

const preJoinTeam = (team: TeamType) => {
    joinTeamId.value = team.id;
    if (team.status === 0) {
        doJoinTeam()
    } else {
        showPasswordDialog.value = true;
    }
}

const doJoinCancel = () => {
    joinTeamId.value = 0;
    password.value = '';
}

/**
 * 加入队伍
 */
const doJoinTeam = async () => {
    if (!joinTeamId.value) {
        return;
    }
    const res = await myAxios.post('/team/join', {
        teamId: joinTeamId.value,
        password: password.value
    });
    if (res?.code === 0) {
        showSuccessToast('加入成功');
        setTimeout(() => {
            window.location.reload();
        }, 1000);
    } else {
        showFailToast('加入失败' + (res.description ? `，${res.description}` : ''));
    }
}

/**
 * 跳转至更新队伍页
 * @param id
 */
const doUpdateTeam = (id: number) => {
    router.push({
        path: '/team/update',
        query: {
            id,
        }
    })
}

/**
 * 退出队伍
 * @param id
 */
const doQuitTeam = async (id: number) => {
    const res = await myAxios.post('/team/quit', {
        teamId: id
    });
    if (res?.code === 0) {
        showSuccessToast('操作成功');
        setTimeout(() => {
            window.location.reload();
        }, 1000);
    } else {
        showFailToast('操作失败' + (res.description ? `，${res.description}` : ''));
    }
}

/**
 * 解散队伍
 * @param id
 */
const doDeleteTeam = async (id: number) => {
    showConfirmDialog({
        title: '您确定要解散队伍吗',
    }).then(async () => {
    const res = await myAxios.post('/team/delete', {
        id,
    });
    if (res?.code === 0) {
        showSuccessToast('操作成功');
        setTimeout(() => {
            window.location.reload();
        }, 1000);
    } else {
        showFailToast('操作失败' + (res.description ? `，${res.description}` : ''));
    }
    })
}

</script>

<style scoped>
#teamCardList :deep(.van-image__img) {
    height: 128px;
    object-fit: unset;
}

.van-card {
    border: 2px solid #d3d3d3;  /* 加厚边框并使用更柔和的颜色 */
    border-radius: 8px;  /* 稍微减少圆角半径 */
}

.van-tag {
    border: 1px solid #ff4d4f;  /* 保持原有颜色 */
    border-radius: 16px;  /* 稍微增加圆角半径 */
}



/* 保持对话框边框样式不变 */
.van-dialog {
    border-radius: 8px;
}

#teamCardList :deep(.van-image__img) {
    border: 1px solid #e0e0e0;  /* 为图片添加细边框 */
}
</style>